<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>学员管理</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/okadmin.css">

</head>

<style>

</style>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>学员列表</legend>
</fieldset>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">教练</label>
                        <div class="layui-input-inline">
                            <select name="coachs" id="coachs" style="float: left;position: relative;"
                                    lay-verify="coachs" lay-search>
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">学习阶段</label>
                        <div class="layui-input-inline">
                            <select name="studyStatus" id="studyStatus" style="float: left;position: relative;"
                                    lay-verify="studyStatus">
                                <option value="1">科目一</option>
                                <option value="2">科目二</option>
                                <option value="3">科目三</option>
                                <option value="4">科目四</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">阶段状态</label>
                        <div class="layui-input-inline">
                            <select name="studyType" id="studyType" style="float: left;position: relative;"
                                    lay-verify="studyType">
                                <option value="-1">未开始</option>
                                <option value="0">学习中</option>
                                <option value="1">学习完毕</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">是否毕业</label>
                        <div class="layui-input-inline">
                            <select name="isEnd" id="isEnd" style="float: left;position: relative;"
                                    lay-verify="isEnd">
                                <option value="0">未毕业</option>
                                <option value="1">已毕业</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="studentId" id="studentId" placeholder="学员id" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="fullname" id="fullname" placeholder="姓名" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="phone" id="phone" placeholder="电话" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" title="显示更多" id="moreBtn"
                            type="0">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search"
                                id="selectsBtn">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="studentList" lay-filter="studentList" class="layui-table"></table>
        </div>
    </div>
</div>
<div class="layui-form">
    <div class="layui-inline" id="studyTypeInline" style="display: none">
        <div style="margin-top: 30px;">
            <label class="layui-form-label">阶段状态</label>
            <div class="layui-input-inline">
                <select name="studyTypeChange" id="studyTypeChange" style="float: left;position: relative;"
                        lay-verify="studyType">
                    <option value="0">学习中</option>
                    <option value="1">学习完毕</option>
                </select>
            </div>
        </div>
        <br>
        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search" id="studyTypeChangeBtn"
                style="margin-left: 50%;margin-top: 15%;">
            <i class="layui-icon layuiadmin-button-btn">修改</i>
        </button>
    </div>
    <div class="layui-inline " id="isEndInline" style="display: none">
        <div style="margin-top: 30px;">
            <label class="layui-form-label">是否毕业</label>
            <div class="layui-input-inline">
                <select name="isEndChange" id="isEndChange" style="float: left;position: relative;"
                        lay-verify="isEndChange">
                    <option value="0">未毕业</option>
                    <option value="1">已毕业</option>
                </select>
            </div>
        </div>
        <br>
        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search" id="isEndChangeBtn"
                style="margin-left: 50%;margin-top: 15%;">
            <i class="layui-icon layuiadmin-button-btn">修改</i>
        </button>
    </div>
    <div class="layui-inline" id="startChoiceInline" style="display: none">
        <button class="layui-btn layuiadmin-btn-list startChoiceInBtn" lay-submit lay-filter="LAY-app-contlist-search" choiceType="2"
                style="margin-left: 45%;margin-top: 15%;">
            <i class="layui-icon layuiadmin-button-btn">开始科目二学员的选择</i>
        </button>
        <br>
        <button class="layui-btn layuiadmin-btn-list startChoiceInBtn" lay-submit lay-filter="LAY-app-contlist-search" choiceType="3"
                style="margin-left: 45%;margin-top: 15%;">
            <i class="layui-icon layuiadmin-button-btn">开始科目三学员的选择</i>
        </button>
    </div>
</div>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="modify">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="resetPwd">重置密码</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="updateStudyType">修改阶段状态</button>
        <button class="layui-btn layui-btn-sm layui-bg-orange" lay-event="updateIsEnd">修改毕业状态</button>
        <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="startChoice">开始教练选择</button>
    </div>
</script>
<script>
    layui.use(['table', 'laydate', 'layer', 'okLayer'], function () {
        var table = layui.table,
            $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            okLayer = layui.okLayer;

        myAjax(mainUri + '/coach/selects', {page: -1}, function (datas) {
            var list = datas['data'];
            var option;
            for (var i = 0; i < list.length; i++) {
                {
                    option += "<option value='" + list[i]['coachId'] + "'>" + list[i]['fullname'] + "</option>";
                }
            }
            $("#coachs").append(option);
            form.render('select');
        })

        //获取表格数据
        var studentTable = table.render({
            elem: '#studentList',
            url: mainUri + '/vChoice/selects', //数据接口
            where: {studyStatus: '1', studyType: '-1', isEnd: '0'},
            toolbar: '#toolbarDemo',
            cols: [[ //表头
                {type: 'checkbox'},
                {field: 'studentId', title: 'ID'},
                {field: 'name', title: '姓名'},
                {
                    field: 'agender', title: '性别', width: 100, templet: function (d) {
                        if (d.agender == '0') {
                            return "女"
                        } else {
                            return "男"
                        }
                    }
                },
                {field: 'phone', title: '电话'},
                {field: 'email', title: '邮箱'},
                {
                    field: 'coach', title: '教练', templet: function (d) {
                        return d.coFullname==null?"暂无教练":d.coFullname
                    }
                },
                {field: 'joiningTime', title: '入学时间'},
                {
                    field: 'studyStatus', title: '当前学习阶段', templet: function (d) {
                        if (d.studyStatus == '1') {
                            return "科目一"
                        } else if (d.studyStatus == '2') {
                            return "科目二"
                        }
                        if (d.studyStatus == '3') {
                            return "科目三"
                        } else if (d.studyStatus == '4') {
                            return "科目四"
                        } else {
                            return "数据异常"
                        }
                    }
                },
                {
                    field: 'studyType', title: '当前学习状态', templet: function (d) {
                        if (d.studyType == '-1') {
                            return "未开始"
                        } else if (d.studyType == '0') {
                            return "学习中"
                        } else if(d.studyType =='1') {
                            return "学习完毕"
                        }
                    }
                },
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
            ]],
            page: {
                layout: ['prev', 'page', 'next', 'skip', 'count'],
                groups: 3,
                limit: 15,
                theme: '#1E9FFF',
            },
        });

        function editStudent(data) {
            let uri = "studentEdit.html?" + dataToString(data)
            okLayer.open("信息修改", uri, "50%", "60%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
            }, function () {
                studentTable.reload();
            })
        }

        //监听行工具事件
        table.on('tool(studentList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除该条信息', function (index) {
                    var studyType=data['studyType'];//当前学习状态
                    var studyStatus= data['studyStatus'];//学习阶段
                    if((studyStatus==2&&studyType==-1)||studyStatus==1){
                        myAjax(mainUri+"/student/delete",{studentId:data['studentId']},function(d){
                            if(d['code']=='0'){
                                layer.msg(d['msg'], {
                                    icon: 1, time: 2000, end: function () {
                                        studentTable.reload();
                                        layer.closeAll();
                                    }
                                })
                            }else{
                                alert(d['msg'])
                            }
                        })
                    }else{
                        alert("当前学员已经选择过教练,无法进行删除")
                    }
                    // layer.close(index);
                });
            } else if (obj.event === 'resetPwd') {
                layer.confirm('确定重置密码?', function (index) {
                    myAjax(mainUri+"/student/updatePwd",{studentId:data['studentId']},function(d){
                        if(d['code']=='0'){
                            layer.msg("重置密码成功", {
                                icon: 1, time: 2000, end: function () {
                                    layer.closeAll();
                                }
                            })
                        }else{
                            alert("重置密码失败")
                        }
                    })
                    // layer.close(index);
                });
            } else if (obj.event === 'modify') {
                editStudent(data)
            }
        });

        //监听行工具事件
        table.on('toolbar(studentList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'startChoice') {
                layer.open({
                    type: 1,
                    title: '开始教练选择',
                    content: $('#startChoiceInline'),
                    area: ['400px', '300px']
                })
            } else if (obj.event === 'updateStudyType') {
                layer.open({
                    type: 1,
                    title: '修改阶段状态',
                    content: $('#studyTypeInline'),
                    area: ['400px', '300px']
                })
            } else if (obj.event === 'updateIsEnd') {
                layer.open({
                    type: 1,
                    title: '修改毕业状态',
                    content: $('#isEndInline'),
                    area: ['400px', '300px']
                })
            }
        });

        /**
         * 搜索按钮
         */
        $("#selectsBtn").on('click', function () {
            var coachs = $("#coachs").val();//教练id
            var studyStatus = $("#studyStatus").find("option:checked").val();//学习阶段
            var studyType = $("#studyType").find("option:checked").val();//学习状态
            var isEnd = $("#isEnd").find("option:checked").val();//是否毕业
            var studentId = $("#studentId").val();//学员id
            var fullname = $("#fullname").val();//学员姓名
            var phone = $("#phone").val();//学员电话号码
            var data = {
                coachId: coachs,
                studyStatus: studyStatus,
                studyType: studyType,
                isEnd: isEnd,
                studentId: studentId,
                fullname: fullname,
                phone: phone
            }
            studentTable.reload({
                where: data,
            });
        })


        /**
         * 修改更多按钮
         */
        function changeMoreBtn() {
            var btn = $("#moreBtn");
            if (btn.attr("type") == '1') {
                btn.html(" <i class=\"layui-icon\">&#xe654;</i>\n")
                btn.attr('type', '0')
                btn.attr('title', '显示更多')
            } else {
                btn.html(" <i class=\"layui-icon\">&#xe67e;</i>\n")
                btn.attr('type', '1')
                btn.attr('title', '隐藏')
                $("#studentId").val("");//id
                $("#fullname").val("");//教练姓名
                $("#phone").val("");//电话号码
            }
        }

        /**
         * 更多按钮
         */
        $("#moreBtn").on('click', function () {
            $(".more").toggle('fast', changeMoreBtn());
        })

        $(".startChoiceInBtn").on('click',function(){
            var type=$(this).attr("choiceType");
            var msg="";
            if(type=='2'){
                msg='确定开始所有科目二学员(<span style="color: red">科目一状态为学习完毕的学员</span>)的教练选择'
            }
            if(type=='3'){
                msg='确定开始所有科目三学员(<span style="color: red">科目二状态为学习完毕的学员</span>)的教练选择'
            }
            if(msg==''){
                layer.msg("数据异常,请重试");
                return;
            }else{
                startChoice(type,msg)
            }
        })

        /**
         * 开始教练选择
         * @param type 类型(2:当前科目为科目一学习完毕的学员,3:当前科目为科目二学习完毕的学员)
         * @param msg 提示语句
         */
        function startChoice(type,msg){
            layer.confirm(msg, function (index) {
                myAjax(mainUri+"/student/updates",{type:type},function(d){
                    if(d['code']==0){
                        layer.msg("开始教练选择成功", {
                            icon: 1, time: 2000, end: function () {
                                studentTable.reload();
                                layer.close(index);
                            }
                        })
                    }
                })
            });
        }
        $("#studyTypeChangeBtn").on('click',function(){
            var checkStatus = table.checkStatus("studentList");
            if(checkStatus['data'].length<1){
                layer.msg("未选中任何学员")
                return;
            }
            var stage = $("#studyTypeChange").find("option:checked");//学习阶段
            layer.confirm('确定修改选中学员阶段状态为: '+stage.html(), function (index) {
                var studentIds=[];
                var choiceIds=[];
                for(i in checkStatus.data){
                    if(checkStatus.data[i]['studentId']){
                        studentIds.push(checkStatus.data[i]['studentId'])
                    }
                    if(checkStatus.data[i]['choiceId']){
                        choiceIds.push(checkStatus.data[i]['choiceId'])
                    }
                }
                var choices={studentIds:studentIds,choiceIds:choiceIds};
                myAjax(mainUri+"/choice/updates",{choicesStr:JSON.stringify(choices),studyType:stage.val()},function(d){
                    if(d['code']=='0'){
                        layer.msg('修改选中学员阶段状态为: '+stage.html()+" 成功", {
                            icon: 1, time: 2000, end: function () {
                                studentTable.reload();
                                layer.closeAll();
                            }
                        })
                    }else{
                        layer.msg('修改选中学员阶段状态为: '+stage.html()+" <span style='color:red'>失败</span>")
                    }
                })
            });
        })
        $("#isEndChangeBtn").on('click',function(){
            var checkStatus = table.checkStatus("studentList");
            if(checkStatus['data'].length<1){
                layer.msg("未选中任何学员")
                return;
            }
            var stage = $("#isEndChange").find("option:checked");//是否毕业
            var studentIds=[];
            for(i in checkStatus.data){
                if(checkStatus.data[i]['studentId']){
                    studentIds.push(checkStatus.data[i]['studentId'])
                }
            }
            var students={studentIds:studentIds};
            layer.confirm('确定修改选中学员毕业状态为: '+stage.html(), function (index) {
                myAjax(mainUri+"/student/updatesByIsEnd",{studentsStr:JSON.stringify(students),isEnd:stage.val()},function(d){
                    if(d['code']=='0'){
                        layer.msg('修改选中学员毕业状态为: '+stage.html()+" 成功", {
                            icon: 1, time: 2000, end: function () {
                                studentTable.reload();
                                layer.closeAll();
                            }
                        })
                    }else{
                        layer.msg('修改选中学员毕业状态为: '+stage.html()+" <span style='color:red'>失败</span>")
                    }
                })
            });
        })
    });
</script>
</body>
</html>
`